<template>
  <div class="usertable">
    <el-row>
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <div class="addUserForm">
          <el-form label-position="top" ref="formU" :model="form" :rules="rules">
            <el-row>
              <el-col :span="3">
                <el-form-item label="工号" prop="empno">
                  <el-input v-model.trim="form.empno" placeholder="请输入工号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="登录账号" prop="username">
                  <el-input v-model.trim="form.username" placeholder="请输入登录账号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="用户姓名" prop="name">
                  <el-input v-model.trim="form.name" placeholder="请输入用户姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="用户角色" prop="sysRoles">
                  <el-select v-model="form.sysRoles" multiple  placeholder="请选择用户角色" style="width:100%;">
                    <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="角色级别" prop="roleLevel">
                  <el-select v-model="form.roleLevel" placeholder="请选择角色级别"  multiple :disabled="disabled" style="width:100%;">
<!--                    value-key="id"-->
                    <el-option v-for="item in roleLevelList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model.trim="form.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <el-form-item label="联系地址" prop="addr">
                  <el-input v-model.trim="form.addr" placeholder="请输入联系地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="公司邮箱" prop="email">
                  <el-input v-model.trim="form.email" placeholder="请输入公司邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="新桥邮箱" prop="sinoEmail">
                  <el-input v-model.trim="form.sinoEmail" placeholder="请输入新桥邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="form.sex" style="width:100%;">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                    v-model="form.birthday"
                    type="date"
                    placeholder="请选择用户生日"
                    value-format="yyyy-MM-dd"
                    style="width:100%;"
                   >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="学历" prop="education">
                  <el-select v-model="form.education" placeholder="请选择用户学历" style="width:100%;">
                    <el-option label="博士研究生" value="博士研究生"></el-option>
                    <el-option label="硕士研究生" value="硕士研究生"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                    <el-option label="大专" value="大专"></el-option>
                    <el-option label="中专" value="中专"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                 <el-form-item label="所属部门" prop="companyNames">
                  <el-select v-model="form.companyNames" multiple placeholder="请选择所属部门" style="width:100%;">
                   <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                 <el-form-item label="岗位名称" prop="postName">
                  <el-select v-model="form.postName" placeholder="请选择岗位名称" style="width:100%;">
                    <el-option v-for="item in postList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                 <el-form-item label="所属小组" prop="groupNames">
                  <el-select v-model="form.groupNames" multiple placeholder="请选择所属小组" style="width:100%;">
                    <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                 <el-form-item label="所属地区" prop="jobAreaName">
                  <el-input v-model="form.jobAreaName" placeholder="请选择所属地区"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                 <el-form-item label="出勤状态" prop="status">
                  <el-select v-model="form.status" placeholder="请选择出勤状态" >
                    <el-option label="正常出勤" value="cq"></el-option>
                    <el-option label="请假" value="qj"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button class="save" @click="submitForm('formU')">保存</el-button>
              <el-button class="cancel" @click="cancelForm">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
  export default{
    name:"custedit",
    props: {
      currentData: {
      type: Object
      }
    },
    data(){
      return {
        form:null,
        roleList:[],
        companyList:[],
        postList:[],
        groupList:[],
        roleLevelList:[],
        rules:{
          empno:[
            { required:true ,message:"请输入工号", trigger:"blur"}
          ],
          username:[
            { required:true ,message:"请输入eoss登录账号", trigger:"blur"}
          ],
          name:[
            { required:true ,message:"请输入用户姓名", trigger:"blur"}
          ],
          sysRoles:[
            { required:true ,message:"请选择用户角色", trigger:"change"}
          ],
          phone:[
            { required:true ,message:"请输入联系电话", trigger:"blur"}
          ],
          addr:[
            { required:true ,message:"请输入联系地址", trigger:"blur"}
          ],
          email:[
            { required:true ,message:"请输入公司邮箱", trigger:"blur"}
          ],
          sinoEmail:[
            { required:false ,message:"请输入新桥邮箱", trigger:"blur"}
          ],
          sex:[
            { required:true ,message:"请输入用户性别", trigger:"blur"}
          ],
          birthday:[
            { required:true ,message:"请选择用户生日", trigger:"change"}
          ],
          education:[
            { required:true ,message:"请输入用户学历", trigger:"blur"}
          ],
          companyNames:[
            { required:true ,message:"请选择所属部门", trigger:"change"}
          ],
          postName:[
            { required:true ,message:"请选择岗位名称", trigger:"change"}
          ],
          groupNames:[
            { required:true ,message:"请选择所属小组", trigger:"change"}
          ],
          jobAreaName:[
            { required:true ,message:"请输入所属地区", trigger:"blur"}
          ],
          roleLevel:[
            { required:false ,message:"请选择角色级别", trigger:"blur"}
          ],
          status:[
            { required:true ,message:"请输入出勤状态", trigger:"blur"}
          ],
        },
        disabled : false
      }
    },
    created(){
      this.initdata();
      axios.post(this.url + "/sysuser/getUserById",qs.stringify({
        id: this.currentData.id
      })).then(res => {
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          let resData = res.data.data;
         resData.sys = [];
         resData.group = [];
         resData.company = [];
         resData.rolelevel = []
         for(let i = 0, len = resData.sysRoles.length; i < len; i++){
           resData.sys.push(resData.sysRoles[i].id);
         }
         for(let i = 0, len = resData.companyNames.length; i < len; i++){
           resData.company.push(resData.companyNames[i].name);
         }
         for(let i = 0, len = resData.groupNames.length; i < len; i++){
           resData.group.push(resData.groupNames[i].name);
         }
         if(resData.roleLevel !== null){
           for(let i = 0, len = resData.roleLevel.length; i < len; i++){
             resData.rolelevel.push(resData.roleLevel[i].name);
           }
         }

         resData.sysRoles = resData.sys;
         resData.companyNames = resData.company;
         resData.groupNames = resData.group;
         resData.roleLevel = resData.rolelevel;
         delete resData.sys
         delete resData.company
         delete resData.group
         delete resData.rolelevel
          this.form = res.data.data;
         if(this.form.sysRoles){
           if(this.form.sysRoles.length == 1){
             if(this.form.sysRoles[0] == 6 || this.form.sysRoles[0] == 8){
               this.disabled = true;
               this.form.roleLevel = [];
             }else {
               this.disabled = false
             }
           }else if(this.form.sysRoles.length == 2){
             if(this.form.sysRoles[0] == 6 && this.form.sysRoles[1] == 8){
               this.disabled = true;
               this.form.roleLevel = [];
             }else if(this.form.sysRoles[0] == 8 && this.form.sysRoles[1] == 6){
               this.form.roleLevel = [];
               this.disabled = true;
             }else {
               this.disabled = false
             }
           }
         }
        }
      })
      //用户角色下拉框
      axios.get(this.url + "/sysuser/getRole")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.roleList = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/getCompany")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.companyList = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/getPost")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.postList = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/getGroup")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.groupList = res.data.data;
        }
      });
      // 角色级别下拉框
      axios.get(this.url + "/sysuser/getSysGrade")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.roleLevelList = res.data.data;
        }
      })
    },
    methods: {
       initdata(){
        this.form = {
            empno:null,
            username:"",
            name:"",
            sysRoles:[],
            roleLevel:[],
            phone:null,
            addr:"",
            email:"",
            sinoEmail:"",
            sex:"",
            birthday:"",
            education:"",
            companyNames:[],
            postName:"",
            groupNames:[],
            jobAreaId:""
        }
      },
      submitForm(formName){
        this.$refs[formName].validate(valid => {
          if (valid) {
            let sysArr = [];
            let groupArr = [];
            let companyArr = [];
            let roleLevelList = [];
            var form = $.extend(true,{},this.form);
            for(let i = 0,len = this.roleList.length; i < len;i++ ){
              for(let j = 0,leng = form.sysRoles.length; j < leng; j++){
                if(this.roleList[i].id == form.sysRoles[j]){
                  let obj = {};
                  obj.name = this.roleList[i].name;
                  obj.id = this.roleList[i].id;
                  sysArr.push(obj);
                }
              }
            }
            for(let i = 0,len = this.groupList.length; i < len;i++ ){
              for(let j = 0,leng = form.groupNames.length; j < leng; j++){
                if(this.groupList[i].name == form.groupNames[j]){
                  let obj = {};
                  obj.name = form.groupNames[j];
                  obj.id = this.groupList[i].id;
                  groupArr.push(obj);
                }
              }
            }
            for(let i = 0,len = this.companyList.length; i < len;i++ ){
              for(let j = 0,leng = form.companyNames.length; j < leng; j++){
                if(this.companyList[i].name == form.companyNames[j]){
                  let obj = {};
                  obj.name = form.companyNames[j];
                  obj.id = this.companyList[i].id;
                  companyArr.push(obj);
                }
              }
            }
            for(let i = 0,len = this.roleLevelList.length; i < len;i++ ){
              for(let j = 0,leng = form.roleLevel.length; j < leng; j++){
                if(this.roleLevelList[i].name == form.roleLevel[j]){
                  let obj = {};
                  obj.name = this.roleLevelList[i].name;
                  obj.id = this.roleLevelList[i].id;
                  roleLevelList.push(obj);
                }
              }
            }
            form.sysRoles = sysArr;
            form.groupNames = groupArr;
            form.companyNames = companyArr;
            form.roleLevel = roleLevelList;
            axios.post(this.url + "/sysuser/upUser",form)
            .then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.$emit("success");
              }
            })
          }else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancelForm() {
      this.$emit("hide");
      }
    },
    watch:{
      "form.sysRoles":function(val){
        if(val.length == 1){
          if(val[0] == 6 || val[0] == 8){
            this.disabled = true;
            this.form.roleLevel = [];
          }else {
            this.disabled = false
          }
        }else if(val.length == 2){
          if(val[0] == 6 && val[1] == 8){
            this.disabled = true;
            this.form.roleLevel = [];
          }else if(val[0] == 8 && val[1] == 6){
            this.form.roleLevel = [];
            this.disabled = true;
          }else {
            this.disabled = false
          }
        }else{
          this.disabled = true;
        }
      }
    }
  }
</script>
<style scoped>
.save {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  margin-right: 43px;
  background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
}

.cancel {
  width: 150px;
  height: 40px;
  border: 1px solid #4e6ef5;
  font-size: 16px;
  font-weight: 500;
  color: #4e6ef5;
}
.usertable{
  background-color:#fff;
}
</style>
